<template>
	<view class="social">
		<comHead :title="'新的朋友'" :isLeft="true" :isRight="false"></comHead>
		<view class="contentBox">
			<view class="list">
				<view class="item">
					<view class="l">
						<image class="img" :src="getImg(friendDetail.avatar)" mode="widthFix"></image>
						<view class="text">
							<view class="time">
								<text>{{friendDetail.nickname}}</text>
								<image v-if="friendDetail.gender==2" src="https://siha.vxmeng.com/static/more/nv.png" mode="widthFix"></image>
								<image v-else src="https://siha.vxmeng.com/static/more/nan.png" mode="widthFix"></image>
							</view>
							<view class="slh">{{friendDetail.bio}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="listBox">
				<text>验证消息</text>
				<textarea disabled v-model="remark" type="text" placeholder="请输入验证消息"/></textarea>
			</view>
			<view class="listBox">
				<text>设置备注</text>
				<input v-model="bio" type="text" placeholder="请输入备注"/>
			</view>
			<view class="btn" @click="doAgreeNewFriend">
				<text>确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				remark:'',
				bio:'',
				search: "",
				friendDetail:{}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.remark = options.remark
			this.getFriendDetail()
		},
		onShow() {
			
		},
		methods: {
			async doAgreeNewFriend() {
				const res = await this.$myRequest({
					url: 'api/lt/doAgreeNewFriend',
					data: {
						friend_id:this.id
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.$tools.showTx(res.msg)
				}
			},
			async getFriendDetail() {
				const res = await this.$myRequest({
					url: 'api/lt/getFriendDetail',
					data: {
						friend_id:this.id
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.friendDetail = res.data
				}
			},
			changeTabs(index){
				this.active = index
			}
		}
	}
</script>

<style lang="less" scoped>
	.social {
		display: flex;
		flex-direction: column;
		width: 100%;
		.contentBox {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 670rpx;
			margin-left: 40rpx;
			.list {
				width: 100%;
				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					padding: 30rpx 0;
					.l {
						display: flex;
						align-items: center;
						width: 70%;
						>image {
							width: 112rpx;
							height: 112rpx;
							border-radius: 50%;
							background: #FAA03E;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.text {
							display: flex;
							flex-direction: column;
							margin-left: 20rpx;
							width: 80%;
							.time {
								display: flex;
								align-items: center;
								// justify-content: space-between;
								image{
									width: 30rpx;
									margin-left: 20rpx;
								}
							}

							text {
								color: #fff;
								font-size: 32rpx;

								&:nth-child(2) {
									font-size: 24rpx;
									color: #999999;
									margin-top: 10rpx;
								}
							}

							.slh {
								font-size: 24rpx;
								color: #999999;
								margin-top: 10rpx;
							}
						}
					}
				}
			}
			.listBox{
				width: 670rpx;
				display: flex;
				flex-direction: column;
				margin-top: 50rpx;
				text{
					&:nth-child(1){
						color: #fff;
						font-size: 28rpx;
					}
					&:nth-child(2){
						color: #999;
						line-height: 1.6;
						font-size: 28rpx;
						width: 100%;
						border-radius: 16rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						padding: 20rpx 34rpx 20rpx 36rpx;
						box-sizing: border-box;
						background: linear-gradient(101deg, rgba(34, 34, 34, 0.6) 0%, rgba(30, 36, 44, 0.39) 100%);
						margin-top: 20rpx;
					}
				}
				input,textarea{
					color: #999;
					line-height: 1.6;
					width: 100%;
					height: 80rpx;
					border-radius: 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 20rpx 34rpx 20rpx 36rpx;
					box-sizing: border-box;
					background: linear-gradient(101deg, rgba(34, 34, 34, 0.6) 0%, rgba(30, 36, 44, 0.39) 100%);
					margin-top: 20rpx;
				}
				textarea{
					height: 200rpx;
				}
			}
			.btn{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 86rpx;
				border-radius: 182rpx;
				color: #fff;
				font-size: 32rpx;
				background: linear-gradient(270deg, #5F58FD 0%, #62B6FC 100%);
				margin-top: 100rpx;
			}
		}
	}
</style>